<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容（最多吐槽120字）" maxlength="120"></textarea>
        <mt-button type='primary' size='large'>发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item">
            <!-- <div class="cmt-item" v-for='(item,index) in comments' :key="item.add_time">             -->
                <div class="cmt-title">
                    第一楼 &nbsp;&nbsp; 用户：匿名用户&nbsp;&nbsp;发表时间：2018-12-12 12:12
                </div>
                <div class="cmt-body">
                    锄禾日当午
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第一楼 &nbsp;&nbsp; 用户：匿名用户&nbsp;&nbsp;发表时间：2018-12-12 12:12
                </div>
                <div class="cmt-body">
                    锄禾日当午
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title">
                    第一楼 &nbsp;&nbsp; 用户：匿名用户&nbsp;&nbsp;发表时间：2018-12-12 12:12
                </div>
                <div class="cmt-body">
                    锄禾日当午
                </div>
            </div>
        </div>

        <mt-button type='danger' size='large' plain>加载更多</mt-button>
        <!-- 上面的plain属性使按钮变中空 -->
    </div>
</template>

<script>
import { Toast } from 'mint-ui'

export default {
    data(){
        return {
            pageIndex:1,//默认展示第一页数据
            comments:[]//所有的评论数据
        }
    },
    // created(){
    //     this.getComments()
    // },
    methods:{
        // getComments(){//获取评论
        //     this.$http.get("/api/getcomments/" + this.id +"？pageindex=" +this.pageIndex).then(result=>{
        //         if(result.body.status==0){
                    // this.comments = result.body.message
                    //每当获取新数据评论的时候不要把老数据清空，而是应该以老数据拼接新数据
                    //this.comments = this.comments.concat(result.body.message)
        //         }else{
        //             Toast('获取评论失败！')
        //         }
        //     })
        // }，
        // getMore(){//加载更多
        //     this.pageIndex ++;
        //     this.getcomments()
        // }
    }
}
</script>

<style lang='scss' scoped>
    .cmt-container{
        h3{
            font-size:18px;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin: 5px 0;
            .cmt-item{
                .cmt-title{
                    line-height: 30px;
                    background-color: #ccc;
                }
                .cmt-body{
                    line-height: 35px;
                    text-indent: 2em;
                }
            }
        }
    }
</style>
